{% extends "admin/base.html" %}

{% block title %}预约管理 - 管理后台 - 万岛潜水{% endblock %}

{% block page_title %}预约管理{% endblock %}

{% block content %}
<div class="card">
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-6">
                <form method="get" action="{{ url_for('main.admin_bookings') }}" class="d-flex">
                    <input type="text" name="search" class="form-control me-2" placeholder="搜索用户名或课程" value="{{ request.args.get('search', '') }}">
                    <button type="submit" class="btn btn-outline-primary">搜索</button>
                </form>
            </div>
            <div class="col-md-6 text-end">
                <div class="btn-group">
                    <a href="{{ url_for('main.admin_bookings', filter='all') }}" class="btn btn-outline-secondary {% if request.args.get('filter') == 'all' or not request.args.get('filter') %}active{% endif %}">全部</a>
                    <a href="{{ url_for('main.admin_bookings', filter='pending') }}" class="btn btn-outline-secondary {% if request.args.get('filter') == 'pending' %}active{% endif %}">待确认</a>
                    <a href="{{ url_for('main.admin_bookings', filter='confirmed') }}" class="btn btn-outline-secondary {% if request.args.get('filter') == 'confirmed' %}active{% endif %}">已确认</a>
                    <a href="{{ url_for('main.admin_bookings', filter='completed') }}" class="btn btn-outline-secondary {% if request.args.get('filter') == 'completed' %}active{% endif %}">已完成</a>
                    <a href="{{ url_for('main.admin_bookings', filter='cancelled') }}" class="btn btn-outline-secondary {% if request.args.get('filter') == 'cancelled' %}active{% endif %}">已取消</a>
                </div>
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户</th>
                        <th>课程</th>
                        <th>教练</th>
                        <th>预约日期</th>
                        <th>人数</th>
                        <th>总价</th>
                        <th>状态</th>
                        <th>支付状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for booking in bookings %}
                    <tr>
                        <td>{{ booking.id }}</td>
                        <td>{{ booking.customer.username }}</td>
                        <td>{{ booking.course.name }}</td>
                        <td>{{ booking.coach.name }}</td>
                        <td>{{ booking.booking_date.strftime('%Y-%m-%d %H:%M') }}</td>
                        <td>{{ booking.participants }}</td>
                        <td>¥{{ booking.total_price }}</td>
                        <td>
                            {% if booking.status == 'pending' %}
                            <span class="badge bg-warning">待确认</span>
                            {% elif booking.status == 'confirmed' %}
                            <span class="badge bg-primary">已确认</span>
                            {% elif booking.status == 'completed' %}
                            <span class="badge bg-success">已完成</span>
                            {% elif booking.status == 'cancelled' %}
                            <span class="badge bg-danger">已取消</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if booking.payment_status == 'unpaid' %}
                            <span class="badge bg-secondary">未支付</span>
                            {% elif booking.payment_status == 'paid' %}
                            <span class="badge bg-success">已支付</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editBookingModal{{ booking.id }}">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteBookingModal{{ booking.id }}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                            
                            <!-- 编辑预约模态框 -->
                            <div class="modal fade" id="editBookingModal{{ booking.id }}" tabindex="-1" aria-labelledby="editBookingModalLabel{{ booking.id }}" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <form method="post" action="{{ url_for('main.admin_edit_booking', id=booking.id) }}">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="editBookingModalLabel{{ booking.id }}">编辑预约</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="mb-3">
                                                    <label for="course_id{{ booking.id }}" class="form-label">课程</label>
                                                    <select class="form-select" id="course_id{{ booking.id }}" name="course_id" required>
                                                        {% for course in courses %}
                                                        <option value="{{ course.id }}" {% if course.id == booking.course_id %}selected{% endif %}>{{ course.name }} (¥{{ course.price }})</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="coach_id{{ booking.id }}" class="form-label">教练</label>
                                                    <select class="form-select" id="coach_id{{ booking.id }}" name="coach_id" required>
                                                        {% for coach in coaches %}
                                                        <option value="{{ coach.id }}" {% if coach.id == booking.coach_id %}selected{% endif %}>{{ coach.name }} ({{ coach.specialty }})</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="booking_date{{ booking.id }}" class="form-label">预约日期</label>
                                                    <input type="datetime-local" class="form-control" id="booking_date{{ booking.id }}" name="booking_date" value="{{ booking.booking_date.strftime('%Y-%m-%dT%H:%M') }}" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="participants{{ booking.id }}" class="form-label">参与人数</label>
                                                    <input type="number" class="form-control" id="participants{{ booking.id }}" name="participants" value="{{ booking.participants }}" min="1" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="status{{ booking.id }}" class="form-label">状态</label>
                                                    <select class="form-select" id="status{{ booking.id }}" name="status" required>
                                                        <option value="pending" {% if booking.status == 'pending' %}selected{% endif %}>待确认</option>
                                                        <option value="confirmed" {% if booking.status == 'confirmed' %}selected{% endif %}>已确认</option>
                                                        <option value="completed" {% if booking.status == 'completed' %}selected{% endif %}>已完成</option>
                                                        <option value="cancelled" {% if booking.status == 'cancelled' %}selected{% endif %}>已取消</option>
                                                    </select>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="payment_status{{ booking.id }}" class="form-label">支付状态</label>
                                                    <select class="form-select" id="payment_status{{ booking.id }}" name="payment_status" required>
                                                        <option value="unpaid" {% if booking.payment_status == 'unpaid' %}selected{% endif %}>未支付</option>
                                                        <option value="paid" {% if booking.payment_status == 'paid' %}selected{% endif %}>已支付</option>
                                                    </select>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="total_price{{ booking.id }}" class="form-label">总价</label>
                                                    <div class="input-group">
                                                        <span class="input-group-text">¥</span>
                                                        <input type="number" class="form-control" id="total_price{{ booking.id }}" name="total_price" value="{{ booking.total_price }}" min="0" step="0.01" required>
                                                    </div>
                                                </div>
                                                <div class="mb-3 form-check">
                                                    <input type="checkbox" class="form-check-input" id="is_group{{ booking.id }}" name="is_group" {% if booking.is_group %}checked{% endif %}>
                                                    <label class="form-check-label" for="is_group{{ booking.id }}">拼团</label>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                                <button type="submit" class="btn btn-primary">保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 删除预约确认模态框 -->
                            <div class="modal fade" id="deleteBookingModal{{ booking.id }}" tabindex="-1" aria-labelledby="deleteBookingModalLabel{{ booking.id }}" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="deleteBookingModalLabel{{ booking.id }}">确认删除</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <p>您确定要删除此预约记录吗？此操作不可撤销。</p>
                                            <p>用户：{{ booking.customer.username }}</p>
                                            <p>课程：{{ booking.course.name }}</p>
                                            <p>预约日期：{{ booking.booking_date.strftime('%Y-%m-%d %H:%M') }}</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                            <a href="{{ url_for('main.admin_delete_booking', id=booking.id) }}" class="btn btn-danger">删除</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if pagination.has_prev %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('main.admin_bookings', page=pagination.prev_num, search=request.args.get('search', ''), filter=request.args.get('filter', '')) }}">上一页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                </li>
                {% endif %}
                
                {% for page in pagination.iter_pages() %}
                    {% if page %}
                        {% if page != pagination.page %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('main.admin_bookings', page=page, search=request.args.get('search', ''), filter=request.args.get('filter', '')) }}">{{ page }}</a>
                        </li>
                        {% else %}
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">{{ page }}</span>
                        </li>
                        {% endif %}
                    {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#">...</a>
                        </li>
                    {% endif %}
                {% endfor %}
                
                {% if pagination.has_next %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('main.admin_bookings', page=pagination.next_num, search=request.args.get('search', ''), filter=request.args.get('filter', '')) }}">下一页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">下一页</a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>
{% endblock %} 